<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrapper, #wrapper2{
            -webkit-perspective: 800px;
            -webkit-perspective-origin: 50% 50%;
        }
        #cube, #cube2{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            -webkit-transform-style: preserve-3d;
        }
        #cube2{
            -webkit-animation: demo 10s linear 2s infinite alternate; /* Safari and Chrome */
            -moz-animation: demo 10s linear 2s infinite alternate; /* Firefox */
            -o-animation: demo 10s linear 2s infinite alternate; /* Opera */
            animation: demo 10s linear 2s infinite alternate;
        }
        .face, .faces{
            width: 200px;
            height: 200px;
            position: absolute;
            margin: 0 auto;
            background-color: rgba(0,0,0,0.5);
            font-size: 200px;
            text-align: center;
            line-height: 200px;
            font-weight: 900;
            color: #ffffff;
        }
        #face1{

        }
        #face2, #faces2{
            -webkit-transform-origin:right;
            -webkit-transform: rotateY(-90deg);
        }
        #face3, #faces3{
            -webkit-transform-origin: left;
            -webkit-transform: rotateY(90deg);
        }
        #face4, #faces4{
            -webkit-transform:translateZ(-200px);
        }
        #face5, #faces5{
            -webkit-transform-origin: top;
            -webkit-transform:rotateX(-90deg);
        }
        #face6, #faces6{
            -webkit-transform-origin: bottom;
            -webkit-transform:rotateX(90deg);
        }
        #slidingControl{
            margin:0 auto;
            font-size: 16px;
            font-weight: bold;
            width: 800px;
        }
        #slidingControl .range-control{
            width:721px;
        }

        .second3dAutoCubeTitle, .first3dCube{
            text-align: center;
          }

        /*css3特效添加开始*/
        @keyframes demo {
            /* 改变这里就可以改变旋转的方向 */
            from{
                transform: rotateY(0deg);
                /*transform: rotateX(0deg);*/
                /*transform: rotateZ(0deg);*/
            }
            to{
                transform: rotateY(360deg);
                /*transform: rotateX(360deg);*/
                /*transform: rotateZ(360deg);*/
            }
        }
    </style>

    <script>
        function rotate(){
            var x = document.getElementById("rotatex").value;
            var y = document.getElementById("rotatey").value;
            var z = document.getElementById("rotatez").value;
            document.getElementById('cube').style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";

            document.getElementById('deg-x').innerText = x;
            document.getElementById('deg-y').innerText = y;
            document.getElementById('deg-z').innerText = z;
        }
    </script>
</head>
<body>

<p class="first3dCube">3d 手动旋转方块</p>

    <div id="wrapper">
        <div id="cube">
            <div class="face" id="face1">1</div>
            <div class="face" id="face2">2</div>
            <div class="face" id="face3">3</div>
            <div class="face" id="face4">4</div>
            <div class="face" id="face5">5</div>
            <div class="face" id="face6">6</div>
        </div>
    </div>

    <div id="slidingControl">
        <p>rotate x:<span id="deg-x">0</span>deg</p>
        <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control" oninput="rotate()"/><br/>

        <p>rotate y:<span id="deg-y">0</span>deg</p>
        <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control" oninput="rotate()"/><br/>

        <p>rotate z:<span id="deg-z">0</span>deg</p>
        <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control" oninput="rotate()"/><br/>
    </div>

<br>
<br>
<br>
<hr>

    <p class="second3dAutoCubeTitle">3d 自动旋转方块</p>

<div id="wrapper2">
    <div id="cube2">
        <div class="faces" id="faces1">1</div>
        <div class="faces" id="faces2">2</div>
        <div class="faces" id="faces3">3</div>
        <div class="faces" id="faces4">4</div>
        <div class="faces" id="faces5">5</div>
        <div class="faces" id="faces6">6</div>
    </div>
</div>

</body>
</html>